<template>
	<div>
		<!-- <h1>首页</h1> -->
		<div class="block">
			<h2 @click="showClick()">Wellcome</h2>
			<er-dialog :dialogTitle="dialogTitle" :visible.sync="dialogVisible" @updateVisible="updateVisible"
				@resetPopupData="resetPopupData" @submitPopupData="submitPopupData" @handleClose="handleClose"
				:popupWidth="'550px'">
				<div style="height:150px;font-size:16px;color:#3c4354;font-family:PingFangSC-Medium;">
					具体的内容
				</div>
			</er-dialog>
		</div>
		<div>
			<div class="drawer-item">
				<span>主题颜色</span>
				<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" />
			</div>
		</div>
		<div style="display: flex;">
			<div class="spinner" v-for="i in 10">{{i}}</div>
		</div>
		<div>
			<h2 @click="test">浪里行舟</h2>
			<h2 @click="name='点击了'">改变provide</h2>
			<h2>{{foo}}</h2>
			<child-com1 @callFather="callFather" ref="comA" :foo="foo" :boo="boo" :coo="coo" :doo="doo" title="前端工匠">
			</child-com1>
		</div>
	</div>
</template>

<script>
	import ThemePicker from '@/components/ThemePicker'
	import childCom1 from "./components/childCom1.vue"
	export default {
		provide: {
			name: '我是provide'
		},
		data() {
			return {
				dialogVisible: false, // 弹框的出现与否
				dialogTitle: '通过', // 标题
				foo: "Javascript",
				boo: "Html",
				coo: "CSS",
				doo: "Vue"
			}
		},
		created() {
			console.log(1)
			console.log(2)
			console.log(3)
			console.log(4)
		},
		mounted() {
			const comA = this.$refs.comA;
			console.log(comA.title); // Vue.js
			// comA.sayHello(); // 弹窗
		},
		components: {
			childCom1,
			ThemePicker
		},
		methods: {
			showClick: function() {
				this.dialogVisible = true
			},
			// 修改是否让页面显示与隐藏的事件
			updateVisible(val) {
				this.dialogVisible = val
			},
			// 点击取消的事件
			resetPopupData() {
				//  这里可重置数据
				this.dialogVisible = false
			},
			// 点击确定的按钮
			async submitPopupData() {
				this.dialogVisible = false
				this.$root.Bus.$emit('toggle', '我是bus改变了')
			},
			// 关闭弹框（头部的X）
			handleClose() {
				this.dialogVisible = false
			},
			callFather() {
				console.log(this.foo)
			},
			test() {
				// 带参数的新打开弹窗
				let routeUrl = this.$router.resolve({
					path: "/pdf/index",
					query: {
						id: 96
					}
				});
				window.open(routeUrl.href, '_blank');
			}

		}
	}
</script>
<style scoped>
	.item {
		padding: 15px;
	}

	.ml {
		margin-left: 30px;
	}

	.spinner {
		width: 60px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		background-color: #ffaa00;

		margin: 100px auto;
		-webkit-animation: rotateplane 1.2s infinite ease-in-out;
		animation: rotateplane 1.2s infinite ease-in-out;
	}

	@-webkit-keyframes rotateplane {
		0% {
			-webkit-transform: perspective(120px)
		}

		50% {
			-webkit-transform: perspective(120px) rotateY(180deg)
		}

		100% {
			-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
		}
	}

	@keyframes rotateplane {
		0% {
			transform: perspective(120px) rotateX(0deg) rotateY(0deg);
			-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
		}

		50% {
			transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
			-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
		}

		100% {
			transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
			-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		}
	}
</style>
